<template>
  <div class="wrapper-div">
    <div class="login-top">
      <div class="login-logo"></div>
      <div class="login-title">
        校园寻友平台
      </div>
    </div>
    <div class="login-form-div">
      <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            placeholder="请输入昵称"
            autocomplete="off"
            :rules="[{ required: true, message: '请输入昵称', trigger: 'onSubmit' }]"
        />
        <van-field
            v-model="userAccount"
            placeholder="请输入账号"
            autocomplete="off"
            :rules="[{ required: true, message: '请输入账号', trigger: 'onSubmit' }]"
        />
        <van-field
            v-model="password"
            type="password"
            placeholder="请输入密码"
            autocomplete="off"
            :rules="[{ required: true, message: '请输入密码', trigger: 'onSubmit' }]"
        />
        <van-field
            v-model="checkPassword"
            type="password"
            placeholder="请再次输入密码"
            autocomplete="off"
            :rules="[{ required: true, message: '请输入密码', trigger: 'onSubmit' }]"
        />
        <div @click="router.push('/user/login')"
             style="float: right; color: #38b9fa; font-size: 14px; margin-right: 8%;">
          已有账号，立即登录
        </div>
        <div style="width:88%; margin: 0 auto; padding-top: 40px">
          <van-button style="border-radius: 10px" color="linear-gradient(to right, #7ea8f8, #1188ff)" block
                      :disabled="isEnableBtn"
                      type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {ref, watchEffect} from "vue";
// @ts-ignore
// import {userLogin, userRegister} from "../services/user.ts";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import myAxios from "../plugins/myAxios";
const route = useRoute();
const router = useRouter();

const username = ref('');
const password = ref('');
const checkPassword = ref('');
const userAccount = ref('');
const isEnableBtn = ref(true);

const onSubmit = async () => {
  const register = await myAxios.post("/user/register", {
    "checkPassword": checkPassword.value,
    "userAccount": userAccount.value,
    "userPassword": password.value,
    "username": username.value,
  })
  if (register) {
    showSuccessToast('注册成功')
    await router.push("/user/login")
  }
};

// const onSubmit = async () => {
//   await userRegister({
//     userAccount: userAccount.value,
//     userPassword: userPassword.value,
//     checkPassword: checkPassword.value
//   }).then((res: any) => {
//     if (res.code === 0 && res.data) {
//       showSuccessToast("注册成功")
//       // 跳转到之前的页面
//       router.push("/user/login")
//     } else {
//       showFailToast(res.description ? res.description : "注册失败")
//     }
//   })
// };

/**
 * 点击 登录遇到问题？
 */
const showHasQuestion = () => {
  showConfirmDialog({
    message: '系统问题请联系开发者。',
    theme: 'round-button',
  }).then(() => {
    // on confirm
    // window.location.href =
  }).catch(() => {
    // on cancel
  })
}

watchEffect(() => {
  isEnableBtn.value = !(password.value && username.value);
})
</script>

<style scoped>
.login-top {
  width: 100%;
  height: 30%;
  margin-top: 10%;
}

.login-logo {
  margin: 0 auto;
  width: 7rem;
  height: 7rem;
  background: url("../assets/background.jpg");
  background-size: 100% 100%;
  border-radius: 50%;
}

.login-title {
  width: 9rem;
  margin: 0 auto;
  padding: 10px 0 0 10px;
  font-size: 22px;
  font-weight: bold;
}


.van-cell {
  width: 90%;
  margin: 15px auto;
  border-radius: 10px;
}

.wrapper-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eef0f3;
}

.login-form-div {
  width: 90%;
  position: relative;
  top: 20%;
  left: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}
</style>






<!--<template>-->
<!--  <div style="padding-top:60px;  margin-left: -10px;;min-width: 380px">-->
<!--    <div class="uploaderCenter">-->
<!--      <img class="img" :src="banner">-->
<!--    </div>-->
<!--    <div style="padding-top: 8px"/>-->
<!--    <van-row justify="center">-->
<!--      <h3>寻找志同道合的朋友</h3>-->
<!--    </van-row>-->
<!--    <van-divider></van-divider>-->
<!--    &lt;!&ndash;  <van-uploader class="uploaderCenter" :after-read="afterRead"/>&ndash;&gt;-->
<!--    <div>-->
<!--      <van-form @submit="onSubmit">-->
<!--        <van-cell-group inset>-->
<!--          <van-field-->
<!--              v-model="username"-->
<!--              :rules="[{ required: true, message: '请填写昵称!' }]"-->
<!--              label="昵称"-->
<!--              name="昵称"-->
<!--              placeholder="昵称"-->
<!--          />-->
<!--          <van-field-->
<!--              v-model="userAccount"-->
<!--              :rules="[{ required: true, message: '请填写账号!' }]"-->
<!--              label="账号"-->
<!--              name="账号"-->
<!--              placeholder="账号"-->
<!--          />-->
<!--          <van-field-->
<!--              v-model="password"-->
<!--              :rules="[{ required: true, message: '请填写密码!' }]"-->
<!--              label="密码"-->
<!--              name="密码"-->
<!--              placeholder="密码"-->
<!--              type="password"-->
<!--          />-->
<!--          <van-field-->
<!--              v-model="checkPassword"-->
<!--              :rules="[{ required: true, message: '请确认密码!' }]"-->
<!--              label="确认密码"-->
<!--              name="确认密码"-->
<!--              placeholder="确认密码"-->
<!--              type="password"-->
<!--          />-->
<!--          <div class="longin">-->
<!--            <van-button block class="defaultLogin" native-type="submit" round type="primary">-->
<!--              注册账号-->
<!--            </van-button>-->
<!--            <van-cell title="" to="/user/login" value="已有账号？点击登录"></van-cell>-->
<!--          </div>-->
<!--        </van-cell-group>-->
<!--      </van-form>-->
<!--    </div>-->
<!--    <copyright/>-->
<!--  </div>-->
<!--</template>-->
<!--<script lang="ts" setup>-->
<!--import {ref} from "vue";-->
<!--import {useRouter} from "vue-router";-->
<!--import {showSuccessToast} from "vant";-->
<!--import myAxios from "../plugins/myAxios";-->
<!--import banner from '../assets/ban.jpg';-->


<!--const router = useRouter()-->
<!--const userAccount = ref('');-->
<!--const username = ref('');-->
<!--const checkPassword = ref('');-->
<!--const password = ref('');-->
<!--const onSubmit = async () => {-->
<!--  const register = await myAxios.post("/user/register", {-->
<!--    "checkPassword": checkPassword.value,-->
<!--    "userAccount": userAccount.value,-->
<!--    "userPassword": password.value,-->
<!--    "username": username.value,-->
<!--  })-->
<!--  if (register) {-->
<!--    showSuccessToast('注册成功')-->
<!--    await router.push("/user/login")-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--@import "../assets/css/public.css";-->

<!--.longin {-->
<!--  margin: 16px 14px 0 5%;-->
<!--}-->

<!--.defaultLogin {-->
<!--  flex: auto;-->
<!--}-->

<!--.uploaderCenter {-->
<!--  margin-top: 8px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--}-->

<!--</style>-->
